<template>
  <!-- 服务操作 -->
  <div class="service_opt app-container">
    <div class="service_opt_box">
      <div class="service_status">
        <div class="service_status_txt">当前状态：{{ subscribeDetail.serviceStatusStr || '--' }}</div>

        <div class="service_technician"
          v-if="subscribeDetail.nickName">咨询师：{{subscribeDetail.nickName}}</div>

        <el-button size="small"
          v-if="subscribeDetail.serviceStatus == '0'"
          @click="toCancelOrder">取消预约单</el-button>
      </div>

      <div style="font-size: 16px;margin-bottom: 20px;"
        class="big_title_style">
        预约信息
      </div>
      <el-form label-width="100px"
        :model="infoForm"
        size="small">
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户姓名">
              <div style="display: flex; align-items: center;">
                <el-input v-model="subscribeDetail.customerName"
                  style="max-width: 332px;width: 100%;flex: 1;overflow: hidden;"
                  readonly></el-input>
                <el-link type="primary"
                  class="ml10"
                  :underline="false"
                  @click="toViewCustomerDetail">查看详情</el-link>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户性别">
              <el-input v-model="subscribeDetail.sexStr"
                style="width: 332px;"
                readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码">
              <el-input v-model="subscribeDetail.mobile"
                style="width: 332px;"
                readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="会员等级">
              <el-input v-model="subscribeDetail.levelName"
                style="width: 332px;"
                readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户留言">
              <el-input type="textarea"
                v-model="subscribeDetail.customerMsg"
                style="width: 332px;"
                readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="咨询备注">
              <el-input type="textarea"
                style="width: 332px;"
                :readonly="subscribeDetail.serviceStatus != '0'"
                v-model.trim="infoForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="预约日期">
              <el-date-picker v-model="infoForm.subscribeDate"
                style="width: 332px;"
                :readonly="subscribeDetail.serviceStatus != '0'"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预约时间">
              <div style="display: flex; align-items: center;">
                <el-time-select v-model="infoForm.startTime"
                  :readonly="subscribeDetail.serviceStatus != '0'"
                  :picker-options="{
                        start: startWorkTime,
                        step: `00:${stepTime}`,
                        end: endWorkTime,
                        maxTime: infoForm.endTime
                      }"
                  placeholder="选择开始时间"
                  style="width: 150px;">
                </el-time-select>
                <span style="margin: 0 10px;font-size: 12px;">至</span>
                <el-time-select v-model="infoForm.endTime"
                  :readonly="subscribeDetail.serviceStatus != '0'"
                  :picker-options="{
                        start: startWorkTime,
                        step: `00:${stepTime}`,
                        end: endWorkTime,
                        minTime: infoForm.startTime
                      }"
                  placeholder="选择结束时间"
                  style="width: 150px;">
                </el-time-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预约提醒">
              <div style="display: flex; width: 100%;">
                <el-input type="textarea"
                  style="width: 332px;"
                  v-model.trim="subscribeTipInfo"></el-input>
                <div class="ml10">
                  <el-button type="primary"
                    v-if="subscribeDetail.serviceStatus == '0'"
                    @click="toSendSubscribeOpt">发送预约</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- <div style="font-size: 16px;margin-bottom: 20px;"
        class="big_title_style">
        基本信息
      </div> -->
      <!-- <el-table :data="customerData"
        class="mb20"
        border>
        <el-table-column label="客户姓名"
          prop="customerName"
          align="center"></el-table-column>
        <el-table-column label="性别"
          prop="sexStr"
          align="center"></el-table-column>
        <el-table-column label="手机号码"
          prop="mobile"
          align="center"></el-table-column>
        <el-table-column label="会员等级"
          prop="levelName"
          align="center"></el-table-column>
        <el-table-column label="客户备注"
          prop="customerMsg"
          align="center"></el-table-column>
      </el-table> -->

      <div style="font-size: 16px;margin-bottom: 20px;"
        class="big_title_style">
        预约服务项目
      </div>
      <!-- <el-tabs class="project_tabs_type mb10"
        v-model="activeName"
        type="card"
        @tab-click="handleClick">
        <el-tab-pane label="预约项目"
          name="1"></el-tab-pane>
        <el-tab-pane label="卡包"
          name="2"></el-tab-pane>
        <el-tab-pane label="余额"
          name="3"></el-tab-pane>
        <el-tab-pane label="服务记录"
          name="4"></el-tab-pane>
        <el-tab-pane label="客户档案"
          name="5"></el-tab-pane>
      </el-tabs> -->
      <!-- 预约项目 -->
      <div class="show_project">
        <div class="to_add_project"
          v-if="subscribeDetail.technicianId && subscribeDetail.serviceStatus == '0'">
          <el-button type="primary"
            size="small"
            @click="toAddProject">添加/修改项目</el-button>
          <el-button size="small"
            @click="toAddOtherProject">添加卡包外的项目</el-button>
        </div>
        <el-table :data="projectList"
          class="show_project_table"
          border>
          <el-table-column label="项目名称"
            min-width="250"
            show-overflow-tooltip
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.serviceName }}</span>
              <span class="show_item_project_skuName"
                v-if="scope.row.skuName">({{scope.row.skuName}})</span>
            </template>
          </el-table-column>
          <el-table-column label="时长(分钟)"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.isMainTime ? scope.row.itemServiceDuration : scope.row.itemComposeDuration }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户确认"
            prop="dataStatus"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.dataStatus == '2' ? '待确认' : '已确认' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="耗卡(元)"
            prop="settlementPriceStr"
            align="center"></el-table-column>

          <el-table-column label="次数"
            prop="time"
            align="center"
            min-width="120">
            <template slot-scope="scope">
              <el-input-number v-if="scope.row.dataStatus == 2"
                @change="changeTimes(scope.row,scope.$index)"
                style="width:100%"
                :controls="true"
                :min="1"
                :max="scope.row.countTimes == null ? 9 : scope.row.countTimes > 9 ? 9 : scope.row.countTimes"
                v-model="scope.row.times"></el-input-number>
              <span v-else>{{ scope.row.times }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作师"
            align="center"
            min-width="120"
            v-if="subscribeDetail.technicianId">
            <template slot-scope="scope">
              <el-select placeholder="请选择操作师"
                v-model="scope.row.technicianId"
                clearable
                v-if="subscribeDetail.serviceStatus == '0' || subscribeDetail.serviceStatus == '1'">
                <el-option v-for="item in therapistList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.technicianName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="洁面"
            align="center"
            min-width="120"
            v-if="subscribeDetail.technicianId">
            <template slot-scope="scope">
              <el-select placeholder="请选择洁面"
                v-model="scope.row.cleansingId"
                clearable
                v-if="subscribeDetail.serviceStatus == '0' || subscribeDetail.serviceStatus == '1'">
                <el-option v-for="item in therapistList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.cleansingName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="配台"
            align="center"
            min-width="120"
            v-if="subscribeDetail.technicianId">
            <template slot-scope="scope">
              <el-select placeholder="请选择配台"
                v-model="scope.row.matchingId"
                clearable
                v-if="subscribeDetail.serviceStatus == '0' || subscribeDetail.serviceStatus == '1'">
                <el-option v-for="item in therapistList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.matchingName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作"
            align="center"
            v-if="subscribeDetail.technicianId && subscribeDetail.serviceStatus == '0'">
            <template slot-scope="scope">
              <el-link type="danger"
                @click="toDeleteItemProject(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 卡包 -->
      <!-- <div class="show_card"
        v-show="activeName == '2'">
        <div class="show_card_item"
          v-for="(item, idx) in cardList"
          :key="idx">
          <div class="show_card_item_info">
            <div class="show_card_item_info_left">
              <div class="show_card_item_info_name">{{ item.serviceType == 'service' ? item.serviceItemName :
                  item.cardName
              }}</div>
              <div class="show_card_item_info_time">{{ item.endDate }}到期</div>
            </div>
            <div class="show_card_item_info_useTime"
              v-if="item.isUnLimit == 0">已使用{{ item.usesTimes }}次</div>
            <div class="show_card_item_info_useTime"
              v-if="item.isUnLimit == 1">该卡券不限制次数使用</div>
          </div>
          <div class="show_card_item_allTime">该卡券总共可使用{{ (item.times - item.usesTimes) }}次</div>

          <el-button class="to-view-detail"
            @click="toShowCardProject(item)"
            type="text"
            v-if="item.serviceType == 'card'"
            size="small">查看详情</el-button>
        </div>
        <el-empty v-if="cardList.length == 0"
          :image-size="100"
          style="width: 100%"
          description="暂无数据"></el-empty>
      </div>
      <pagination v-show="activeName == '2'"
        :total="total1"
        :page.sync="pageNum1"
        :limit.sync="pageSize1"
        @pagination="getSubscribeDetai2" /> -->
      <!-- 余额 -->
      <!-- <div class="show_balance"
        v-show="activeName == '3'">
        <div style="font-size: 14px;margin-bottom: 20px; padding: 0 20px;"
          class="big_title_style">
          账号余额
        </div>
        <div class="show_balance_type">
          <div class="show_balance_type_item">
            <div class="show_balance_type_item_num">{{ balanceInfo.balanceStr || 0 }}</div>
            <div class="show_balance_type_item_label">菠萝金币</div>
          </div>
          <div class="show_balance_type_item">
            <div class="show_balance_type_item_num">{{ balanceInfo.redBagStr || 0 }}</div>
            <div class="show_balance_type_item_label">菠萝银币</div>
          </div>
          <div class="show_balance_type_item">
            <div class="show_balance_type_item_num">{{ balanceInfo.score || 0 }}</div>
            <div class="show_balance_type_item_label">菠萝派</div>
          </div>
        </div>
        <div style="font-size: 14px;margin-bottom: 20px; padding: 0 20px;"
          class="big_title_style">
          门店余额明细
        </div>
        <el-table :data="balanceInfoDetail"
          border>
          <el-table-column label="门店名称"
            prop="storeName"
            align="center"></el-table-column>
          <el-table-column label="菠萝金币余额"
            prop="balance"
            align="center">
            <template slot-scope="scope">
              {{ (scope.row.balance / 100 || 0) }}
            </template>
          </el-table-column>
          <el-table-column label="菠萝银币余额"
            prop="redBag"
            align="center">
            <template slot-scope="scope">
              {{ (scope.row.redBag / 100 || 0) }}
            </template>
          </el-table-column>
        </el-table>
      </div> -->
      <!-- 客户档案 -->
      <!-- <div class="show_customer_record"
        v-show="activeName == '4'">
        <div class="customer_record_item"
          v-for="(item, index) in customerRecordList"
          :key="index">
          <div class="customer_record_item_info">
            <div class="customer_record_info">服务日期：{{ item.dateStr }}</div>
            <div class="customer_record_info">服务时长：{{ item.durationTime }}</div>
            <div class="customer_record_info">耗卡金额：{{ item.price }}元</div>
          </div>
          <div class="customer_record_item_project">
            <div class="customer_record_project_th">
              <div class="customer_record_project_td">项目名称</div>
              <div class="customer_record_project_td">服务时长</div>
              <div class="customer_record_project_td">治疗师</div>
              <div class="customer_record_project_td">服务类别</div>
              <div class="customer_record_project_td"
                style="max-width: 200px;"></div>
            </div>
            <template v-if="item.customerSubscribeDetailVos.length > 0">
              <div class="customer_record_project_tr"
                v-for="(val, idx) in item.customerSubscribeDetailVos"
                :key="idx">
                <div class="customer_record_project_td">{{ val.serviceName }}</div>
                <div class="customer_record_project_td">约{{ val.time }}分钟</div>
                <div class="customer_record_project_td">{{ val.technicianName }}</div>
                <div class="customer_record_project_td">服务类别123</div>
                <div class="customer_record_project_td"
                  style="display: flex;justify-content: center;max-width: 200px;">
                  <el-button type="primary"
                    size="mini">查询项目</el-button>
                </div>
              </div>
            </template>
            <div v-else
              class="customer_record_item_project-empty">暂无数据</div>
          </div>
          <div class="customer_record_item_moreInfo">
            <div class="customer_record_moreInfo_item">
              <div class="customer_record_moreInfo_item_label">客户诉求</div>
              <div class="customer_record_moreInfo_item_desc">{{ item.customerRequirement }}</div>
            </div>
            <div class="customer_record_moreInfo_item">
              <div class="customer_record_moreInfo_item_label">项目铺垫</div>
              <div class="customer_record_moreInfo_item_desc">{{ item.projectBedding }}</div>
            </div>
            
            <div class="customer_record_moreInfo_item">
              <div class="customer_record_moreInfo_item_label">服务详情</div>
              <div class="customer_record_moreInfo_item_desc">{{ item.serviceDetail }}</div>
            </div>
            <div class="customer_record_moreInfo_item">
              <div class="customer_record_moreInfo_item_label">渠道来源</div>
              <div class="customer_record_moreInfo_item_desc">{{ item.sourcePlatformStr }}</div>
            </div>
            <div class="customer_record_moreInfo_item">
              <div class="customer_record_moreInfo_item_label">设备能量</div>
              <div class="customer_record_moreInfo_item_desc">{{ item.energy }}</div>
            </div>
            <div class="customer_record_moreInfo_item">
              <div class="customer_record_moreInfo_item_label">客户照片</div>
              <div class="customer_record_moreInfo_item_img">
                <el-image class="show_item_img"
                  :preview-src-list="item.customerImagesStr"
                  v-for="(imgm, i) in item.customerImagesStr"
                  :src="imgm"
                  :key="i"></el-image>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-if="customerRecordList.length == 0"
          :image-size="100"
          style="width: 100%"
          description="暂无数据"></el-empty>
      </div>
      <pagination v-show="activeName == '4'"
        :total="total3"
        :page.sync="pageNum3"
        :limit.sync="pageSize3"
        @pagination="getSubscribeDetai4" /> -->

      <!-- <CustomerRecord v-show="activeName == '5'" /> -->
    </div>

    <div class="dw">
      <el-button @click="toBack"
        style="margin-top: 10px;margin-left: 40%;width: 100px;">返回</el-button>
      <el-button type="primary"
        v-if="subscribeDetail.serviceStatus == '0' && !subscribeDetail.technicianId"
        style="width: 100px;"
        @click="toAcceptService">接受服务</el-button>
      <el-button type="primary"
        v-if="subscribeDetail.serviceStatus == '0' && subscribeDetail.technicianId"
        style="width: 100px;"
        @click="toStartService">开始服务</el-button>
      <el-button type="primary"
        v-if="subscribeDetail.serviceStatus == '1'"
        style="width: 100px;"
        @click="toCompleteService">服务完成</el-button>
      <el-button type="primary"
        v-if="subscribeDetail.serviceStatus == '2' && !subscribeDetail.customerRequirement"
        style="width: 120px;"
        @click="toUploadServiceRecord">上传服务记录</el-button>
      <el-button type="primary"
        plain
        v-if="subscribeDetail.serviceStatus == '0' || subscribeDetail.serviceStatus == '1'"
        style="margin-top: 10px;width: 100px;"
        @click="toSaveInfo('')">保存</el-button>
    </div>

    <el-dialog title="选择卡包"
      :visible.sync="dialogVisibleCard"
      width="660px"
      :before-close="handleCloseCard">
      <div class="show_card_content">
        <div style="font-size: 14px;margin-bottom: 20px;"
          class="big_title_style">
          服务项目
        </div>
        <div class="show_card_service mb20">
          <div class="show_card_item"
            v-for="(item, idx) in selectCardList"
            :key="idx">
            <div class="show_card_item_box">
              <div class="show_card_item_info">
                <div class="show_card_item_Info_img">
                  <img :src="item.itemMainImage"
                    alt="">
                </div>
                <div class="show_card_item_info_box">
                  <div class="show_card_item_info_name">{{ item.itemName }}<span v-if="item.skuName">({{item.skuName}})</span></div>
                  <div class="show_card_item_info_tags">
                    <el-tag size="mini"
                      class="show_card_item_info_tag"
                      v-if="item.isLockDevice == '1'">设备</el-tag>
                  </div>
                  <div class="show_card_item_info_price">￥{{ item.itemSettlementPriceStr }}</div>
                  <div class="show_card_item_info_bottom">
                    <div class="show_card_item_endTime">
                      <span v-if="item.endDate">结束日期：{{item.endDate}}</span>
                      <span v-else>有效期内</span>
                    </div>
                    <div class="show_card_item_useTimes">{{item.isUnLimit == '1'? '不限次数': `可使用${item.surplusUserTimes || ''}次`}}</div>
                  </div>
                </div>
              </div>
              <el-checkbox v-model="item.isSelect"
                :disabled="item.isDisabled"
                @change="itemCardSelect(idx, $event)"></el-checkbox>
            </div>
          </div>
        </div>
        <div style="font-size: 14px;margin-bottom: 20px;"
          class="big_title_style">
          套餐卡券
        </div>
        <div class="show_card_package">
          <div class="show_card_item"
            v-for="(item, index) in selectPackageList"
            :key="index"
            style="padding-bottom: 0">
            <div class="show_card_item_box">
              <div class="show_card_item_info">
                <div class="show_card_item_Info_img"> <img :src="item.cardMainImage"
                    alt=""> </div>
                <div class="show_card_item_info_box">
                  <div class="show_card_item_info_name">{{ item.cardName }}</div>
                  <div class="show_card_item_info_tags">
                    <el-tag size="mini"
                      class="show_card_item_info_tag"
                      v-if="item.isLockDevice == '1'">设备</el-tag>
                    <el-tag size="mini"
                      class="show_card_item_info_tag"
                      v-if="item.isDdl == '1'">叠叠乐</el-tag>
                  </div>
                  <div class="show_card_item_info_price">￥{{ item.cardSettlementPriceStr }}</div>
                  <div class="show_card_item_info_bottom">
                    <div class="show_card_item_endTime">
                      <span v-if="item.endDate">结束日期：{{item.endDate}}</span>
                      <span v-else>有效期内</span>
                    </div>
                    <div class="show_card_item_useTimes">{{item.isUnLimit == '1'? '不限次数': `可使用${item.surplusUserTimes || ''}次`}}</div>
                  </div>
                </div>
              </div>
              <el-checkbox v-model="item.isSelect"
                :disabled="item.isDisabled"
                v-if="item.isDdl == '1'"
                @change="itemPackageAllSelect(index, $event)"></el-checkbox>
            </div>
            <div class="show_card_item_subProject">
              <div class="show_card_item_subProject_data"
                v-for="(val, idx) in item.itemVoList"
                :key="idx">
                <div class="show_card_item_subProject_label">{{ val.itemName }}<span v-if="val.skuName">({{val.skuName}})</span></div>
                <el-checkbox v-model="val.isSelect"
                  v-if="!item.isDdl || item.isDdl == '0'"
                  :disabled="val.isDisabled"
                  @change="itemPackageSelect(index, idx, $event)"></el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"
        class="dialog-footer">
        <el-button @click="handleCloseCard">取消</el-button>
        <el-button @click="toAffirmProject"
          type="primary">确认</el-button>
      </div>
    </el-dialog>

    <!-- 卡包外的项目 -->
    <el-dialog title="选择卡包外的项目"
      :visible.sync="dialogVisibleOtherCard"
      width="740px"
      :before-close="handleCloseOtherCard">
      <div class="show-card-list">
        <div class="item-card-box"
          v-for="(item, idx) in otherCardList"
          :key="idx">
          <div class="item-card-content">
            <el-checkbox v-model="item.isSelect"></el-checkbox>
            <div class="item-card-info">
              <div class="item-card-img"> <img :src="item.itemMainImage"
                  alt=""> </div>
              <div class="item-card-info-box">
                <div class="item-card-info-name">{{item.itemName}}</div>
                <div class="item-card-info-price">￥ {{item.itemSettlementPriceStr}}</div>
              </div>
            </div>
          </div>
          <el-input-number size="mini"
            style="width: 100px"
            :min="1"
            v-model.trim="item.time"
            @input="item.time = parseFloat(onInput(item.time+''))"></el-input-number>
        </div>
      </div>
      <div slot="footer"
        class="dialog-footer">
        <el-button @click="handleCloseOtherCard">取消</el-button>
        <el-button @click="toAffirmOtherProject"
          type="primary">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog title=""
      :visible.sync="dialogVisibleComplete"
      width="300px"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      class="save_success_box">
      <div class="save_success">
        <i class="el-icon-circle-check"></i>
        <div class="save_success_txt">服务完成</div>
      </div>
      <div class="to_opt_btn">
        <el-button @click="toBack"
          class="mb10 to_opt_btn_item">返回工作台</el-button>
        <el-button type="primary"
          class="to_opt_btn_item"
          @click="toUploadServiceRecord">上传服务记录</el-button>
      </div>
    </el-dialog>

    <!-- 单个服务项目查看 -->
    <!-- <el-dialog title="服务项目属性"
      :visible.sync="dialogVisibleServiceCard"
      width="600px"
      :before-close="handleCloseServiceCard">
      <div slot="footer"
        class="dialog-footer">
        <el-button @click="handleCloseServiceCard">关闭</el-button>
      </div>
    </el-dialog> -->

    <UploadRecord v-if="subscribeId"
      :subscribeId="subscribeId"
      :show="dialogVisibleRecord"
      :subscribeDetail="subscribeDetail"
      :infoRow="infoRow"
      @handleCloseRecord="handleCloseRecord"
      @uploadRecord="toBack" />

    <!-- <ShowCardProject :show="showDialog"
      :dataList="cardInfo.itemRecord"
      :title="cardInfo.cardName"
      @toCloseShowProjectBox="toCloseShowProjectBox" /> -->
  </div>
</template>

<script>
import {
  subscribeDetail,
  subscribeDetailTab,
  serviceOptApi,
  startService,
  customerAddProject,
  addProjectRecord,
  deleteProjectRecord,
  toTherapistList,
  endService,
  editTimes,
  getOtherCardList,
  submitOtherCardData,
  saveSubscribeInfo,
  getSendsubscribeTip,
  toSendsubscribe
} from "@/api/service/workbench";
import { onInput } from "@/utils/util";
import imageArraySize from "@/components/ImageUpload/imageArraySize";
import UploadRecord from './uploadRecord.vue'
// import ShowCardProject from '@/views/components/showCardProject'
import CustomerRecord from '@/views/customer/Info/customerRecord'

export default {
  data () {
    return {
      subscribeId: '',
      storeId: '',
      subscribeDetail: {},
      customerData: [],
      pageNum1: 1,
      pageSize1: 10,
      total1: 0,
      pageNum2: 1,
      pageSize2: 10,
      pageNum3: 1,
      pageSize3: 10,
      total3: 0,
      projectList: [],
      cardList: [],
      balanceInfo: {},
      balanceInfoDetail: [],
      customerRecordList: [],
      infoForm: {
        subscribeDate: '',
        startTime: '',
        endTime: '',
        remark: ''
      },
      stepTime: '',
      startWorkTime: '',
      endWorkTime: '',
      subscribeTipInfo: '',
      infoRow: {},

      activeName: '1',
      therapistList: [],
      dialogVisibleCard: false,
      selectCardList: [],
      selectPackageList: [],
      dialogVisibleComplete: false,
      dialogVisibleRecord: false,
      dialogVisibleOtherCard: false,
      otherCardList: [],
      dialogVisibleServiceCard: false,

      showDialog: false,
      cardInfo: {},
      recordIdList: []
    }
  },
  components: {
    imageArraySize,
    UploadRecord,
    // ShowCardProject,
    CustomerRecord
  },
  async created () {
    // this.subscribeId = this.$route.query.subscribeId
    // this.storeId = this.$route.query.storeId
    // this.stepTime = this.$route.query.stepTime
    // this.startWorkTime = this.$route.query.startWorkTime
    // this.endWorkTime = this.$route.query.endWorkTime
    // if (this.subscribeId) {
    //   await this.getSubscribeDetail()
    //   this.getSubscribeDetailTab()
    //   this.getTherapistList()
    //   this.toGetSendsubscribeTip()
    // }
    // this.toGetOtherCardList()
  },
  async activated () {
    this.subscribeId = this.$route.query.subscribeId
    this.storeId = this.$route.query.storeId
    this.stepTime = this.$route.query.stepTime
    this.startWorkTime = this.$route.query.startWorkTime
    this.endWorkTime = this.$route.query.endWorkTime
    if (this.subscribeId) {
      await this.getSubscribeDetail()
      this.getSubscribeDetailTab()
      this.getTherapistList()
      this.toGetSendsubscribeTip()
    }
    this.toGetOtherCardList()
  },
  deactivated () {

  },
  methods: {
    onInput,
    toViewCustomerDetail () {
      this.$router.push("/customer/detail/" + this.subscribeDetail.customerUid);
    },
    handleCloseServiceCard () {
      this.dialogVisibleServiceCard = false
    },
    async toGetSendsubscribeTip () {
      let res = await getSendsubscribeTip(this.subscribeId)
      if (res?.data) {
        this.infoRow = res.data
        this.subscribeTipInfo = res.data.tip
      }
    },
    toSendSubscribeOpt () {
      this.$confirm('确认发送预约?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await toSendsubscribe({
          subscribeId: this.subscribeId
        })
        if (res) {
          this.msgSuccess('发送成功')
        }
      }).catch(() => {

      });
    },
    async toSaveInfo (cb) {
      if (!this.infoForm.endTime) {
        this.$message({
          message: '请选择预约结束时间',
          type: 'warning'
        });
        return
      }

      let list = []
      this.projectList.forEach(item => {
        list.push({
          itemComposeDuration: item.isMainTime ? item.itemServiceDuration : item.itemComposeDuration,
          detailId: item.detailId,
          technicianId: item.technicianId,
          cleansingId: item.cleansingId,
          matchingId: item.matchingId
        })
      })
      let res = await saveSubscribeInfo({
        subscribeDate: this.infoForm.subscribeDate,
        startDate: `${this.infoForm.subscribeDate} ${this.infoForm.startTime}:00`,
        endDate: this.infoForm.endTime ? `${this.infoForm.subscribeDate} ${this.infoForm.endTime}:00` : '',
        remark: this.infoForm.remark,
        subscribeId: this.subscribeId,
        workbenchItemVoVoList: list
      })
      if (res) {
        if (cb) {
          typeof cb == 'function' && cb()
        } else {
          this.msgSuccess('保存成功')
        }
      }
    },
    toShowCardProject (item) {
      this.cardInfo = item
      this.showDialog = true
    },
    toCloseShowProjectBox () {
      this.showDialog = false
      this.cardInfo = {}
    },
    async toGetOtherCardList () {
      let res = await getOtherCardList()
      if (res) {
        let { data } = res
        data.forEach(item => {
          item.isSelect = false
          item.time = 1
        })
        this.otherCardList = data
      }
    },
    // 接受服务
    toAcceptService () {
      this.toSaveInfo(() => {
        this.$confirm('确认接受服务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          serviceOptApi({
            subscribeId: this.subscribeId,
            serviceStatus: '4',
          }).then(res => {
            this.msgSuccess('操作成功')
            this.getSubscribeDetail()
          })
        }).catch(() => {

        });
      })
    },
    // 开始服务
    toDeleteItemProject (row) { //删除项目
      this.$confirm('确认删除治疗项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProjectRecord(row.detailId).then(res => {
          this.msgSuccess('操作成功')
          this.getSubscribeDetai1()
        })
      }).catch(() => {

      });
    },
    async getCustomerAddProject () {
      let res = await customerAddProject({ customerUid: this.subscribeDetail.customerUid, storeId: this.subscribeDetail.storeId })
      if (res) {
        res.itemData.forEach(item => {
          item.isSelect = false
          item.isDisabled = false
          if (this.recordIdList.indexOf(item.recordId) > -1) {
            item.isSelect = true
          }
        })
        this.selectCardList = res.itemData
        res.cardData.forEach(item => {
          item.isSelect = false
          item.isDisabled = false
          let idsList = []
          item.itemVoList.forEach(val => {
            val.isSelect = false
            val.isDisabled = false
            if (this.recordIdList.indexOf(val.recordId) > -1) {
              val.isSelect = true
              if (item.isDdl == '1') {
                item.isSelect = true
              }
            }
            if (item.isDdl == '1') {
              idsList.push(...val.itemList)
            }
          })
          if (item.isDdl == '1') {
            item.idsList = [...new Set(idsList)]
          }
        })
        this.selectPackageList = res.cardData

        this.rejectCheck()
      }
    },
    rejectCheck () {
      let idsList = []
      this.selectCardList.forEach(item => {
        if (item.isSelect) {
          idsList.push(...item.itemList)
        }
      })
      this.selectPackageList.forEach(item => {
        if (item.isDdl == '1' && item.isSelect) {
          idsList.push(...item.idsList)
        } else {
          item.itemVoList.forEach(val => {
            if (val.isSelect) {
              idsList.push(...val.itemList)
            }
          })
        }
      })
      idsList = [...new Set(idsList)]

      this.selectCardList.forEach(item => {
        if (idsList.indexOf(item.itemId) > -1) {
          item.isDisabled = true
        } else {
          item.isDisabled = false
        }
      })
      this.selectPackageList.forEach(item => {
        if (item.isDdl == '1') {
          let ids = item.idsList, isDisabled = false
          idsList.forEach(vid => {
            if (ids.indexOf(vid) > -1) {
              isDisabled = true
            }
          })
          item.isDisabled = isDisabled
        } else {
          item.itemVoList.forEach(val => {
            if (idsList.indexOf(val.itemId) > -1) {
              val.isDisabled = true
            } else {
              val.isDisabled = false
            }
          })
        }
      })
    },
    itemCardSelect (index, value) {
      this.rejectCheck()
    },
    itemPackageAllSelect (index, value) {
      this.selectPackageList[index].itemVoList.forEach(val => {
        val.isSelect = true
      })
      this.rejectCheck()
    },
    itemPackageSelect (index, idx, value) {
      this.rejectCheck()

      let allTimes = this.selectPackageList[index].surplusUserTimes, selectTimes = 0
      this.selectPackageList[index].itemVoList.forEach(val => {
        if (val.isSelect) {
          selectTimes++
        }
      })

      if (allTimes && allTimes == selectTimes) {
        this.selectPackageList[index].itemVoList.forEach(val => {
          if (!val.isSelect) {
            val.isDisabled = true
          }
        })
      } else {
        this.selectPackageList[index].itemVoList.forEach(val => {
          val.isDisabled = false
        })
      }

      // if (isAllTrue) {
      //   this.selectPackageList[index].isSelect = true
      // } else {
      //   this.selectPackageList[index].isSelect = false
      // }

    },
    toStartService () {
      let isSelectTherapist = true
      this.projectList.forEach(item => {
        if (!item.technicianId) {
          isSelectTherapist = false
        }
      })
      if (!isSelectTherapist) {
        //this.msgError('请选择操作师')
        //return
      }

      this.$confirm('确认开始服务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let list = []
        this.projectList.forEach(item => {
          list.push({
            itemComposeDuration: item.isMainTime ? item.itemServiceDuration : item.itemComposeDuration,
            detailId: item.detailId,
            technicianId: item.technicianId,
            cleansingId: item.cleansingId,
            matchingId: item.matchingId
          })
        })

        startService({
          uid: this.subscribeId,
          data: list
        }).then(res => {
          this.msgSuccess('操作成功')
          this.getSubscribeDetail()
          this.getSubscribeDetai1()
        })
      }).catch(() => {

      });
    },
    // 服务完成
    toCompleteService () {
      this.$confirm('确认服务完成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let list = []
        this.projectList.forEach(item => {
          list.push({
            itemComposeDuration: item.isMainTime ? item.itemServiceDuration : item.itemComposeDuration,
            detailId: item.detailId,
            technicianId: item.technicianId
          })
        })

        endService({
          uid: this.subscribeId,
          data: list
        }).then(res => {
          this.getSubscribeDetail()
          this.dialogVisibleComplete = true
        })
      }).catch(() => {

      });
    },
    // 取消预约单
    toCancelOrder () {
      this.$prompt('请输入取消服务备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.+$/,
        inputErrorMessage: '备注不能为空'
      }).then(({ value }) => {
        serviceOptApi({
          subscribeId: this.subscribeId,
          serviceStatus: '100',
          customerMsg: value
        }).then(res => {
          this.msgSuccess('操作成功')
          this.toBack()
        })
      }).catch(() => {

      });
    },
    // 预约详情
    async getSubscribeDetail () {
      let res = await subscribeDetail(this.subscribeId)
      if (res) {
        let { data } = res
        this.subscribeDetail = data
        this.customerData = [data]

        let startTime = data.startDate.split(' ')[1], endTime = data.endDate ? data.endDate.split(' ')[1] : []
        this.infoForm = {
          subscribeDate: data.subscribeDate,
          startTime: `${startTime.split(':')[0]}:${startTime.split(':')[1]}`,
          endTime: endTime.length > 0 ? `${endTime.split(':')[0]}:${endTime.split(':')[1]}` : '',
          remark: data.remark
        }
      }
    },
    // 获取治疗师
    async getTherapistList () {
      let res = await toTherapistList({
        storeId: this.storeId
      })
      if (res) {
        this.therapistList = res.data
      }
    },
    // 预约治疗项目
    getSubscribeDetailTab () {
      this.getSubscribeDetai1()
      // this.getSubscribeDetai2()
      // this.getSubscribeDetai3()
      // this.getSubscribeDetai4()
    },
    async getSubscribeDetai1 () {
      let res = await subscribeDetailTab({
        subscribeId: this.subscribeId,
        serviceType: 'subscribeItem'
      })
      if (res) {
        let data = res.data, arr1 = [], arr2 = [], arr3 = [], arr4 = []
        let list1 = [], list2 = [],
          longTime = 0, lognTimeId = '',
          longTime2 = 0, lognTimeId2 = ''
        data.forEach(item => {
          if (item.isMaster == '1') {
            list1.push(item)
            if (item.itemServiceDuration > longTime) {
              longTime = item.itemServiceDuration
              lognTimeId = item.detailId
            }
          } else {
            list2.push(item)
            if (item.itemServiceDuration > longTime2) {
              longTime2 = item.itemServiceDuration
              lognTimeId2 = item.detailId
            }
          }
        })
        if (list1.length > 0) {
          list1.forEach(item => {
            if (item.detailId == lognTimeId) {
              item.isMainTime = true
            } else {
              item.isMainTime = false
            }
          })
        } else {
          list2.forEach(item => {
            if (item.detailId == lognTimeId2) {
              item.isMainTime = true
            } else {
              item.isMainTime = false
            }
          })
        }

        let dataList = [...list1, ...list2]
        dataList.forEach(item => {
          this.projectList.forEach(val => {
            if (item.serviceId == val.serviceId) {
              this.$set(item, 'technicianId', val.technicianId)
              this.$set(item, 'cleansingId', val.cleansingId)
              this.$set(item, 'matchingId', val.matchingId)
            }
          })
        })

        this.projectList = dataList
      }
    },
    async getSubscribeDetai2 () {
      let res = await subscribeDetailTab({
        subscribeId: this.subscribeId,
        serviceType: 'card',
        pageNum: this.pageNum1,
        pageSize: this.pageSize1
      })
      if (res) {
        this.cardList = res.data
        this.total1 = res.total
      }
    },
    async getSubscribeDetai3 () {
      let res = await subscribeDetailTab({
        subscribeId: this.subscribeId,
        serviceType: 'balance',
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
      })
      if (res) {
        this.balanceInfoDetail = res.data
        this.balanceInfo = res.fund || {}
      }
    },
    async getSubscribeDetai4 () {
      let res = await subscribeDetailTab({
        subscribeId: this.subscribeId,
        serviceType: 'customerArchives',
        pageNum: this.pageNum3,
        pageSize: this.pageSize3,
      })
      if (res) {
        this.customerRecordList = res.data
        this.total3 = res.total
      }
    },
    handleClick (tab, event) {
      this.activeName = tab.name
    },
    // 上传服务记录
    handleCloseRecord () {
      this.dialogVisibleRecord = false
    },
    toUploadServiceRecord () {
      this.dialogVisibleComplete = false
      this.dialogVisibleRecord = true
    },
    // 添加卡包外的项目
    async toAffirmOtherProject () {
      let arr = []
      this.otherCardList.forEach(item => {
        if (item.isSelect) {
          arr.push({
            serviceId: item.itemId,
            times: item.time,
            serviceType: 'service'
          })
        }
      })

      if (arr.length > 0) {
        let res = await submitOtherCardData(this.subscribeId, arr)
        if (res) {
          this.msgSuccess('操作成功')
          this.handleCloseOtherCard()
          this.getSubscribeDetai1()
        }
      } else {
        this.handleCloseOtherCard()
      }
    },
    handleCloseOtherCard () {
      this.dialogVisibleOtherCard = false
      this.otherCardList.forEach(item => {
        item.isSelect = false
        item.time = 1
      })
    },
    toAddOtherProject () {
      this.dialogVisibleOtherCard = true
    },
    // 添加项目
    async toAddProject () {
      let recordIdList = []
      this.projectList.forEach(item => {
        recordIdList.push(item.recordId)
      })
      this.recordIdList = recordIdList

      await this.getCustomerAddProject()
      this.dialogVisibleCard = true
    },
    handleCloseCard () {
      this.recordIdList = []
      this.dialogVisibleCard = false
    },
    async toAffirmProject () {
      let list = []
      this.selectCardList.forEach(item => {
        if (item.isSelect) {
          list.push({
            recordId: item.recordId,
            serviceType: 'service',
            cardId: '',
            serviceId: item.itemId
          })
        }
      })
      let pIds = []
      this.selectPackageList.forEach(item => {
        item.itemVoList.forEach(val => {
          if (val.isSelect) {
            list.push({
              recordId: val.recordId,
              serviceType: 'card',
              cardId: item.cardId,
              serviceId: val.itemId
            })
            if (pIds.indexOf(item.cardId) < 0) {
              pIds.push(item.cardId)
              list.push({
                recordId: item.recordId,
                serviceType: 'card',
                cardId: '',
                serviceId: item.cardId
              })
            }
          }
        })
      })

      let res = await addProjectRecord(this.subscribeId, list)
      if (res) {
        this.msgSuccess('操作成功')
        this.dialogVisibleCard = false
        this.getSubscribeDetai1()

      }
    },
    changeTimes (row, ind) {
      if (row.cardId) {
        /**
         * 统计所有cardId目前使用的次数,如果超了 再默认给1
         */
        let count = 0;
        this.projectList.forEach(vo => {
          if (vo.cardId == row.cardId) {
            count += vo.times;
          }
        })
        if (count > row.countTimes) {
          this.$message.error("使用次数已超过限制");
          return
        }
        editTimes(row).then(response => {
          subscribeDetailTab({
            subscribeId: this.subscribeId,
            serviceType: 'subscribeItem'
          })
        });


      }
    },
    toBack () {
      this.dialogVisibleRecord = false
      setTimeout(() => {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/store/workbench/medicine",
          query: {
            t: Date.now()
          }
        });
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.service_opt {
  padding-bottom: 80px;
}

.service_opt_box {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.service_status {
  background-color: #f9f9f9;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .service_status_txt {
    font-size: 14px;
    color: #333;
  }
  .service_technician {
    font-size: 14px;
    color: #333;
  }
}

.item-form-value {
  color: #333;
}

.to_add_project {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.show_project_table {
  &::v-deep .el-input-number .el-input__inner {
    text-align: center;
  }

  .show_item_project_skuName {
    font-size: 12px;
    color: #999;
    margin-left: 5px;
  }
}

.show_card {
  display: flex;
  flex-wrap: wrap;

  .show_card_item {
    padding: 4px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    padding: 15px;
    width: calc((100% - 30px) / 3);

    &:not(:nth-child(3n)) {
      margin-right: 15px;
    }

    margin-bottom: 15px;
    border-radius: 10px;

    .show_card_item_info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .show_card_item_info_left {
        flex: 1;
        overflow: hidden;
        margin-right: 10px;

        .show_card_item_info_name {
          font-size: 15px;
          color: #333;
          line-height: 1;
          margin-bottom: 10px;
        }

        .show_card_item_info_time {
          font-size: 12px;
          color: #999;
        }
      }

      .show_card_item_info_useTime {
        font-size: 15px;
        color: #333;
        font-weight: 600;
      }
    }

    .show_card_item_allTime {
      margin-top: 15px;
      font-size: 12px;
      color: #333;
    }
  }
}

.show_balance {
  .show_balance_type {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0 30px 0;

    .show_balance_type_item {
      text-align: center;

      .show_balance_type_item_num {
        font-size: 32px;
        color: #333;
        margin-bottom: 10px;
        line-height: 1;
      }

      .show_balance_type_item_label {
        font-size: 14px;
        color: #999;
      }
    }
  }
}

.show_customer_record {
  .customer_record_item {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;

    &:not(:last-child) {
      margin-bottom: 20px;
    }

    .customer_record_item_info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      height: 40px;
      font-size: 13px;
      color: #333;
      background-color: #f9f9f9;
      border-bottom: 1px solid #eee;
    }

    .customer_record_item_project {
      .customer_record_project_th {
        display: flex;
        font-size: 14px;
        color: #333;
        font-weight: 600;
      }

      .customer_record_project_tr {
        display: flex;
        font-size: 14px;
        color: #333;
      }

      .customer_record_project_td {
        flex: 1;
        overflow: hidden;
        padding: 10px;
        border-bottom: 1px solid #eee;

        &:not(:last-child) {
          border-right: 1px solid #eee;
        }
      }

      .customer_record_item_project-empty {
        line-height: 60px;
        text-align: center;
        height: 60px;
        color: #909399;
        font-size: 14px;
        border-bottom: 1px solid #eee;
      }
    }

    .customer_record_item_moreInfo {
      .customer_record_moreInfo_item {
        display: flex;

        &:not(:last-child) {
          min-height: 56px;
          line-height: 40px;
          border-bottom: 1px solid #eee;
        }

        &:last-child {
          min-height: 80px;
          line-height: 80px;

          .customer_record_moreInfo_item_label {
            line-height: 80px;
          }
        }

        .customer_record_moreInfo_item_label {
          width: 160px;
          font-size: 14px;
          color: #999;
          border-right: 1px solid #eee;
          line-height: 56px;
          background-color: #f9f9f9;
          padding: 0 10px;
        }

        .customer_record_moreInfo_item_desc {
          padding: 10px;
          flex: 1;
          overflow: hidden;
          font-size: 14px;
          color: #333;
          line-height: 20px;
        }

        .customer_record_moreInfo_item_img {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          min-height: 80px;
          padding: 10px 10px 0 10px;

          .show_item_img {
            width: 50px;
            height: 50px;
            margin: 0 10px 10px 0;
            border-radius: 4px;
            overflow: hidden;
          }
        }
      }
    }
  }
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.show_card_service,
.show_card_package {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .show_card_item {
    width: 300px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;

    .show_card_item_box {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .show_card_item_info {
        flex: 1;
        margin-right: 10px;
        overflow: hidden;
        display: flex;

        .show_card_item_Info_img {
          width: 70px;
          height: 70px;
          border-radius: 4px;
          margin-right: 10px;
          overflow: hidden;
        }

        .show_card_item_info_box {
          flex: 1;
          overflow: hidden;
          .show_card_item_info_name {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
          }

          .show_card_item_info_tag {
            margin: 0 5px 5px 0;
          }

          .show_card_item_info_price {
            font-size: 14px;
            color: #333;
          }

          .show_card_item_info_bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 5px;
            .show_card_item_endTime {
              font-size: 12px;
              color: #999;
            }
            .show_card_item_useTimes {
              font-size: 12px;
              color: #333;
            }
          }
        }
      }
    }

    .show_card_item_subProject {
      border-top: 1px solid #eee;
      margin-top: 10px;

      .show_card_item_subProject_data {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

.show-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item-card-box {
    width: 340px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item-card-content {
      flex: 1;
      overflow: hidden;
      padding-right: 10px;
      display: flex;
      align-items: center;
      .item-card-info {
        flex: 1;
        overflow: hidden;
        display: flex;
        margin-left: 10px;
        .item-card-img {
          width: 70px;
          height: 70px;
          border-radius: 4px;
          overflow: hidden;
          margin-right: 10px;
        }
        .item-card-info-box {
          flex: 1;
          overflow: hidden;
          font-size: 14px;
          color: #333;
          .item-card-info-name {
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  &::v-deep .el-input-number .el-input__inner {
    text-align: center;
  }
}

.save_success_box {
  &::v-deep .el-dialog {
    margin-top: 15vh !important;
  }
}

.save_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0 40px;

  .el-icon-circle-check {
    font-size: 40px;
    color: #30b08f;
    font-weight: 600;
  }

  .save_success_txt {
    font-size: 20px;
    color: #333;
    margin-top: 16px;
  }
}

.to_opt_btn {
  .to_opt_btn_item {
    display: block;
    width: 100%;

    &:last-child {
      margin: 0;
    }
  }
}
</style>
